<template>
  <div class="index">
    <Header></Header>
    <div class="main">
      <p class="current-nav">
        当前位置 :
        <router-link to="index">首页</router-link>
        <i>></i>
        <a>应急预案备案</a>
        <i>></i>备案材料
      </p>
      <div class="infor record" style="margin-bottom:0;">
        <ul class="clearfix steps" style=" padding-top:20px;">
          <li class="steps-active" @click="goToPage(0)">
            <span>1</span>
            <p>备案材料</p>
            <p class="info_note clearfix">
              <i class="el-icon-warning-outline"></i>
              <span>
                                请先<strong>导出</strong>
                                所需备案材料，便于备案申请时提交
                            </span>
            </p>
          </li>
          <li @click="goToPage(1)">
            <span>2</span>
            <p>备案申请</p>
            <p class="info_note clearfix">
              <i class="el-icon-warning-outline"></i>
              <span>
                                将备案申请表填好后，<strong>保存</strong>并<strong>导出</strong>，进行线下备案，线上备案正在开发中
                            </span>
            </p>
          </li>
          <!-- <li>
              <span>3</span>
              <p>备案信息查询</p>
              <p class="info_note clearfix">
                  <i class="el-icon-warning-outline"></i>
                  <span>线上备案5个工作日后，可查看备案结果</span>
              </p>
          </li> -->
        </ul>
        <!-- <div class="form-container">
            <div class="record-title">
                <div>
                    <el-button @click="downloadmsg">
                        <i class="el-icon-download">导出</i>
                    </el-button>
                </div>
            </div>
            <el-table
                ref="multipleTable"
                :data="urlList"
                tooltip-effect="dark"
                @selection-change="handleSelectionChange"
                v-loading.lock="loading"
                row-key="fileId"
                element-loading-spinner="el-icon-loading"
            >
                <el-table-column
                    type="index"
                    align="center"
                    label="序号"
                    width="100"
                >
                </el-table-column>
                <el-table-column
                    label
                    :reserve-selection="true"
                    type="selection"
                    align="center"
                ></el-table-column>
                <el-table-column
                    prop="fileName"
                    label="文件名称"
                    align="center"
                ></el-table-column>
                <el-table-column
                    label="操作"
                    align="center"
                    width="120"
                    show-overflow-tooltip
                >
                    <template slot-scope="scope">
                        <el-button
                            class="my-look"
                            size="small"
                            @click="lookDetail(scope.row.url)"
                        >
                            <i class="el-icon-search"></i>查看
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div> -->
      </div>
      <div class="infor record" style="margin-top:0;margin-bottom:0;">
        <div class="table-title">
          <p class="title">评审报告</p>
          <div class="record-title">
            <div>
              <el-button @click="downloadmsg">
                <i class="el-icon-upload2">导出</i>
              </el-button>
            </div>
          </div>
        </div>
        <div class="form-container">
          <el-table
            ref="multipleTable1"
            :data="urlList1"
            tooltip-effect="dark"
            @selection-change="handleSelectionChange"
            v-loading.lock="loading"
            row-key="fileId"
            element-loading-spinner="el-icon-loading"
          >
            <el-table-column
              type="index"
              align="center"
              label="序号"
              width="100"
            >
            </el-table-column>
            <el-table-column
              label
              :reserve-selection="true"
              type="selection"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="name"
              label="清单"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="fileName"
              label="文件名称"
              align="center"
            ></el-table-column>
            <el-table-column
              label="操作"
              align="center"
              width="200"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <div style="display: flex;justify-content: center">
                <el-button v-if="scope.row.fileName != null"
                           class="detail-btn"
                           style="margin-right: 10px"
                           @click="lookDetail(scope.row.url)"
                >
                  <i class="el-icon-search"></i>查看
                </el-button>
                <el-upload style="width: 80px;float: right;"
                           action="/emergency/v1.0/upload/file"
                           ref="reportUpload"
                           :data="{
                                            type: scope.row.type,templateName:scope.row.name
                                        }"
                           :http-request="newload"
                           :show-file-list="false"
                           accept=".doc,.docx"
                >
                  <el-button class="detail-btn">
                    <i class="el-icon-upload2">上传</i>
                  </el-button>
                </el-upload>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="infor record" style="margin-top:0;margin-bottom:0;">
        <p class="title">评审意见</p>
        <div class="form-container">
          <el-table
            ref="multipleTable2"
            :data="urlList2"
            tooltip-effect="dark"
            @selection-change="handleSelectionChange1"
            v-loading.lock="loading"
            row-key="fileId"
            element-loading-spinner="el-icon-loading"
          >
            <el-table-column
              type="index"
              align="center"
              label="序号"
              width="100"
            >
            </el-table-column>
            <el-table-column
              label
              :reserve-selection="true"
              type="selection"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="name"
              label="清单"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="fileName"
              label="文件名称"
              align="center"
            ></el-table-column>
            <el-table-column
              label="操作"
              align="center"
              width="200"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <div style="display: flex;justify-content: center">
                  <el-button
                    v-if="scope.row.fileName != null"
                    class="detail-btn"
                    style="margin-right: 10px"
                    @click="lookDetail(scope.row.url)"
                  >
                    <i class="el-icon-search"></i>查看
                  </el-button>
                  <el-upload style="width: 80px;float: right;"
                             action="/emergency/v1.0/upload/file"
                             ref="reportUpload"
                             :data="{
                                            type: scope.row.type,templateName:scope.row.name
                                        }"
                             :http-request="newload"
                             :show-file-list="false"
                             accept=".doc,.docx"
                  >
                    <el-button class="detail-btn">
                      <i class="el-icon-upload2">上传</i>
                    </el-button>
                  </el-upload>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="infor record" style="margin-top:0;">
        <p class="title">应急预案</p>
        <div class="form-container">
          <el-table
            ref="multipleTable3"
            :data="urlList3"
            tooltip-effect="dark"
            @selection-change="handleSelectionChange2"
            v-loading.lock="loading"
            row-key="fileId"
            element-loading-spinner="el-icon-loading"
          >
            <el-table-column
              type="index"
              align="center"
              label="序号"
              width="100"
            >
            </el-table-column>
            <el-table-column
              label
              :reserve-selection="true"
              type="selection"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="name"
              label="清单"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="fileName"
              label="文件名称"
              align="center"
            ></el-table-column>
            <el-table-column
              label="操作"
              align="center"
              width="200"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <div style="display: flex;justify-content: center">
                <el-button
                  class="detail-btn"
                  style="margin-right: 10px"
                  @click="lookDetail(scope.row.url)"
                  v-if="scope.row.fileName != null"
                >
                  <i class="el-icon-search"></i>查看
                </el-button>
                <el-upload style="width: 80px;float: right;"
                           action="/emergency/v1.0/upload/file"
                           ref="reportUpload"
                           :data="{
                                            type: scope.row.type,templateName:scope.row.name
                                        }"
                           :http-request="newload"
                           :show-file-list="false"
                           accept=".doc,.docx"
                >
                  <el-button class="detail-btn">
                    <i class="el-icon-upload2">上传</i>
                  </el-button>
                </el-upload>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="next">
        <el-button type="primary" @click="goToPage(1)" class="next-btn"
        >下一步
        </el-button
        >
      </div>
    </div>
    <Footer/>
  </div>
</template>

<script>
  import Header from "../common/header";
  import Footer from "../common/footer";
  import config from "../../config.js"

  export default {
    components: {
      Header,
      Footer
    },
    data() {
      return {
        loadingFlag: false,
        multipleSelection: [],
        currentPage: 1,
        pageIndex: 1,
        pageSize: 10,
        total: 0,
        recordList: [],
        urlList1: [{"type": "1", "name": "安全风险评估报告"}, {"type": "2", "name": "应急资源调查报告"}],//临时替代recordList
        urlList2: [{"type": "3", "name": "形式评审表"}, {"type": "4", "name": "要素评审表"}, {
          "type": "5",
          "name": "附件要素评审表"
        }, {"type": "6", "name": "评审意见表"}],//临时替代recordList
        urlList3: [{"type": "7", "name": "应急预案汇编"}],//临时替代recordList
        loading: false,
        selectFile: [],
        navChildren: [],
        selectFile1: [],
        selectFile2: [],
        selectFile3: []
      };
    },
    created() {
      this.lookrecord();
      this.loading = true;
      this.navChildren = JSON.parse(this.$route.query.navChildren)
    },
    methods: {
      goToPage(index) {
        console.log(this.navChildren)
        this.$router.push({
          path: this.navChildren[index].menuUrl,
          query: {
            navIndex: this.$route.query.navIndex,
            navChildren: this.$route.query.navChildren
          }
        })
      },
      lookDetail(url) { //查看备案材料
        window.open(url)
        // console.log(url)
      },
      handleSelectionChange(val) {
        this.selectFile1 = val
      },
      handleSelectionChange1(val) {
        this.selectFile2 = val
      },
      handleSelectionChange2(val) {
        this.selectFile3 = val
      },
      lookrecord() { //获取备案材料列表
        this.$axios({
          method: "get",
          url: this.$baseUrl + "emergency/v1.0/plan/record/data/" + JSON.parse(localStorage.getItem("user")).companyId
        }).then(res => {
          this.loading = false;
          let data = res.data.meta;
          if (data.success) {
            // this.recordList = res.data.data;
            res.data.data.map((item) => {
              let newItem = {}, url = {}
              if (item.accidentReportUrl != null && item.accidentReportUrl != '') {
                newItem.url = item.accidentReportUrl
              }
              if (item.resourceReportUrl != null && item.resourceReportUrl != '') {
                newItem.url = item.resourceReportUrl
              }
              if (item.planSummaryUrl != null && item.planSummaryUrl != '') {
                newItem.url = item.planSummaryUrl
              }
              if (item.offlineReviewUrl != null && item.offlineReviewUrl != '') {
                newItem.url = item.offlineReviewUrl
              }
              if (item.formalFileUrl != null && item.formalFileUrl != '') {
                newItem.url = item.formalFileUrl
              }
              if (item.factorFileUrl != null && item.factorFileUrl != '') {
                newItem.url = item.factorFileUrl
              }
              if (item.fileTempUrl != null && item.fileTempUrl != '') {
                newItem.url = item.fileTempUrl
              }
              if (item.opionFileUrl != null && item.opionFileUrl != '') {
                newItem.url = item.opionFileUrl
              }
              newItem.fileName = item.fileName
              newItem.fileId = item.fileId
              if (Number(item.type) < 3) {
                for (var i = 0; i < this.urlList1.length; i++) {
                  if (this.urlList1[i].type == item.type) {
                    this.urlList1[i] = {...this.urlList1[i], ...newItem}
                  }
                }
              } else if (Number(item.type) < 7) {
                for (var i = 0; i < this.urlList2.length; i++) {
                  if (this.urlList2[i].type == item.type) {
                    this.urlList2[i] = {...this.urlList2[i], ...newItem}
                  }
                }
              } else {
                for (var i = 0; i < this.urlList3.length; i++) {
                  if (this.urlList3[i].type == item.type) {
                    this.urlList3[i] = {...this.urlList3[i], ...newItem}
                  }
                }
              }

              //  this[`urlList${item.type}`].push(newItem)

              // console.log(newItem)
            })
            this.$nextTick(() => {
              for (let j = 1; j < 4; j++) {
                for (let i = 0; i < this[`urlList${j}`].length; i++) {
                  this.$refs[`multipleTable${j}`].toggleRowSelection(
                    this[`urlList${j}`][i],
                    true
                  );
                }
              }
            });
          } else {
            this.$message({
              message: data.message,
              type: "error"
            });
          }
        });
      },
      downloadmsg() {
        this.selectFile = [...this.selectFile1, ...this.selectFile2, ...this.selectFile3]
        var activeFlag = true;
        for (var i = 0; i < this.selectFile.length; i++) {
          if (this.selectFile[i].fileName == null || this.selectFile[i].fileName == '') {
            activeFlag = false;
            break;
          }
        }
        if (!activeFlag) {
          this.$message({
            message: '不能勾选文件名为空得数据！',
            type: "error"
          });
          return false
        }
        let params = {fileList: this.selectFile}
        if (this.selectFile.length == 0) {
          this.$message({
            message: '请至少选择一项！',
            type: "error"
          });
          return false
        }
        this.$axios({
          method: "post",
          responseType: 'blob',//防止返回乱码
          url: this.$baseUrl + "emergency/v1.0/plan/record/file/export",
          data: params
        }).then(res => {
          if (res.status == 200) {
            const data = res.data;
            const blob = new Blob([data], {type: "application/zip"});
            const blobUrl = window.URL.createObjectURL(blob);
            this.download(blobUrl);
          } else {
            this.$message({
              message: '导出失败！',
              type: "error"
            });
          }
        });
      },
      download(blobUrl) {
        const a = document.createElement('a');
        a.style.display = 'none';
        a.download = '备案材料';
        a.href = blobUrl;
        a.click();
      },
      newload(file) {  //上传文档
        debugger
        this.loadingFlag = true
        let url = config.baseUrl + "/emergency/v1.0/plan/material/upload?companyId=" + JSON.parse(localStorage.user).companyId + '&type=' + file.data.type + '&templateName=' + file.data.templateName;
        var fd = new FormData()
        fd.append('file', file.file)
        let config1 = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        this.$axios.post(url, fd, config1).then(res => {
          this.loadingFlag = false
          if (res.data.meta.success) {
            this.lookrecord();
            this.$message.success('上传成功')
          } else {
            this.$message({
              message: res.data.meta.message,
              type: 'error'
            });
          }

        })
      },
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
  @import "../../../static/css/information.less";

  .record {
    .form-container {
      padding: 20px 0 40px;
      margin: 0 auto;
      .el-table {
        width: calc(100% - 200px);
        margin: 0 auto;
        border-top: 1px solid #ebeef5;
      }
      .el-button:hover {
        opacity: 0.8;
      }
    }
    .record-title {
      position: relative;
      p {
        font-size: 24px;
        font-weight: 900;
        color: #333333;
        text-align: center;
      }
      > div {
        overflow: hidden;
        width: 100%;
        height: 40px;
        padding: 0 100px;
        .el-button {
          width: 80px;
          background: #f8f7ff;
          border: 0;
          border-radius: 6px;
          margin-right: 4px;
          font-size: 14px;
          color: #6492ff;
        }
      }
    }
  }

  .my-look {
    width: 80px;
    height: 36px;
    background-color: #f6f9ff;
    border: none;
    font-size: 14px;
    color: #3e83fc;
    text-align: center;
  }

  .title {
    margin-bottom: 0;
  }

  .table-title {
    display: flex;
    justify-content: space-between;
    align-items: end;
  }
</style>
<style scoped>
  .next {
    width: calc(100% - 60px);
    text-align: center;
    background: #fff;
    padding-bottom: 20px;
    margin: 0 auto;
  }

  .next-btn {
    background: #4080ff;
    border: 0;
    border-radius: 8px;
    color: #fff;
  }

  .detail-btn {
    color: #4180ff !important;
    background: #f6f9ff !important;
    border: none !important;
    border-radius: 8px !important;
    border: 1px solid #4180ff !important;
  }
</style>
